<template>
    <div class="container">
      <div class="tips-title">1.线形进度条</div>
      <el-progress :percentage="50" :format="format1"></el-progress>
      <el-progress :percentage="100" :format="format1"></el-progress>
      <el-progress :percentage="100" status="success"></el-progress>
      <el-progress :percentage="100" status="warning"></el-progress>
      <el-progress :percentage="50" status="exception"></el-progress>
      <div class="tips-title">2.百分比内显</div>
      <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress><br>
      <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress><br>
      <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress><br>
      <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress><br>
      <div class="tips-title">3.自定义颜色</div>
      <div class="tips-title-sub">单色</div>
      <el-progress :percentage="percentage" :color="customColor"></el-progress>
      <div class="tips-title-sub">不同程度不同颜色,绑定data</div>
      <el-progress :percentage="percentage" :color="customColors"></el-progress>
      <div class="tips-title-sub">不同程度不同颜色,绑定methods</div>
      <el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
      <div>
        <el-button-group>
          <el-button icon="el-icon-minus" @click="decrease"></el-button>
          <el-button icon="el-icon-plus" @click="increase"></el-button>
        </el-button-group>
      </div>
      <div class="tips-title">4.环形进度条</div>
      <el-progress type="circle" :percentage="0"></el-progress>
      <el-progress type="circle" :percentage="25"></el-progress>
      <el-progress type="circle" :percentage="100" status="success"></el-progress>
      <el-progress type="circle" :percentage="70" status="warning"></el-progress>
      <el-progress type="circle" :percentage="50" status="exception"></el-progress>

      <div class="tips-title">5.仪表盘形进度条</div>
      <el-progress type="dashboard" :percentage="percentage" :color="customColors"></el-progress>
      <div>
        <el-button-group>
          <el-button icon="el-icon-minus" @click="decrease"></el-button>
          <el-button icon="el-icon-plus" @click="increase"></el-button>
        </el-button-group>
      </div>
    </div>
</template>
<script>
  export default {
    name: 'd-progress',
    data() {
      return {
        percentage: 20,
        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
      }
    },
    methods: {
      // 1.
      format1(percentage) {
        return percentage === 100 ? '满' : `${percentage}%`;
      },
      // 3.
      customColorMethod(percentage) {
        if (percentage < 30) {
          return '#909399';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      increase() {
        this.percentage += 10;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      },
      decrease() {
        this.percentage -= 10;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      }
    }
  }
</script>
<style>
</style>

